<template>
    <div>
        <!-- 页头 -->
        <myhead></myhead>
        <!-- 左边商品具体信息 -->
        <div>
            <div class="all">
                <img class="img" :src="imgurl" alt="" />
                <div class="right">
                    <div class="hd">商品名称</div>
                    <div class="ds">商品描述</div>
                    <div class="pr">原价 ¥</div>
                    <div class="pr1">租借价 ¥</div>
                    <div class="buy">
                        <el-button @click="dialogFormVisible = true"
                            >原价购买</el-button
                        >
                        <el-dialog
                            :visible.sync="dialogFormVisible"
                            style="height:100%"
                            title="确定订单"
                        >
                            <el-form class="form">
                                <el-form-item
                                    label="商品名称"
                                    style="width:140px"
                                >
                                    商品1
                                </el-form-item>
                                <el-form-item label="数量" style="width:240px">
                                    <el-input-number
                                        v-model="num"
                                        :min="1"
                                        :max="10"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="售价"
                                    style="width:140px"
                                    v-model="price"
                                >
                                    {{ num * price }}
                                </el-form-item>
                                <el-form-item label="地址" style="width:240px">
                                    <el-select
                                        placeholder="地址栏"
                                        class="select"
                                        v-model="addressValue"
                                    >
                                        <el-option
                                            v-for="item in address"
                                            :key="item.id"
                                            :value="item.address"
                                            :addressId="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false"
                                    >取 消</el-button
                                >
                                <el-button type="primary" @click="confirm()"
                                    >确认订单</el-button
                                >
                            </span>
                        </el-dialog>
                        <el-button @click="isvip" style="margin-left:100px"
                            >租借</el-button
                        >
                        <el-dialog
                            :visible.sync="dialogForm1Visible"
                            style="height:100%"
                            title="租借订单"
                        >
                            <el-form class="form">
                                <el-form-item
                                    label="商品名称"
                                    style="width:140px"
                                >
                                    商品1
                                </el-form-item>
                                <el-form-item label="数量" style="width:240px">
                                    <el-input-number
                                        v-model="num"
                                        :min="1"
                                        :max="10"
                                    ></el-input-number>
                                </el-form-item>
                                <el-form-item
                                    label="售价"
                                    style="width:140px"
                                    v-model="price"
                                >
                                    {{ num * price * 0.5 }}
                                </el-form-item>
                                <el-form-item label="地址" style="width:240px">
                                    <el-select
                                        placeholder="地址栏"
                                        class="select"
                                        v-model="addressValue"
                                    >
                                        <el-option
                                            v-for="item in address"
                                            :key="item.id"
                                            :value="item.address"
                                            :addressId="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="租借日期"
                                    style="width:440px;height:100px"
                                >
                                    <el-date-picker
                                        v-model="date"
                                        type="daterange"
                                        range-separator="至"
                                        value-format="yyyy-MM-dd"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="renttime"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogForm1Visible = false"
                                    >取 消</el-button
                                >
                                <el-button type="primary" @click="confirm1()"
                                    >确认订单</el-button
                                >
                            </span>
                        </el-dialog>
                    </div>
                </div>
            </div>

            <div></div>
        </div>

        <foot></foot>
    </div>
</template>
<script>
import myhead from "../components/myhead";
import foot from "../components/foot";
export default {
    data() {
        return {
            commodityId: "1",
            buyerId: "13612358717328856298",
            sellerId: "",
            typeId: 0,
            loading: false,
            vipid: "1",
            dialogFormVisible: false,
            dialogForm1Visible: false,
            addressId: "",
            amount: this.num * this.price,
            //购买
            order: {
                commodityId: "1",
                buyerId: "13612358717328856298",
                total: 10,
                typeId: 0,
                addressId: "1",
                amount: 10000.0,
            },
            // 租借
            order1: {
                commodityId: "1",
                buyerId: "13612358717328856298",
                total: 10,
                typeId: 1,
                addressId: "1",
                amount: 10000.0,
                renttime: "",
            },
            pickerOptions1: "",
            name: "商品1",
            price: "1000.00",
            num: "10",
            ds:
                "一贯以时尚休闲的风格、浪漫飘逸的个性、精致细腻的工艺在世界同类服装行列中引领潮流",
            imgurl: require("../assets/img/001.jpg"),
            address: [
                {
                    id: 1,
                    name: "wuyanzu",
                    address: "数计院",
                    userTel: "13652765943",
                    userId: "test1",
                },
                {
                    id: 2,
                    name: "wuyanzu",
                    address: "文传院",
                    userTel: "13652765943",
                    userId: "test1",
                },
            ],
            addressValue: "",
            content: {},
            // 时间范围
            pickerMinDate:'',
            date:null,
            renttime: {
                onPick: (obj) => {
                    this.pickerMinDate = new Date(obj.minDate).getTime();
                },
                disabledDate: (time) => {
                    if (this.pickerMinDate) {
                        const day1 = 30 * 24 * 3600 * 1000;
                        let maxTime = this.pickerMinDate + day1;
                        let minTime = this.pickerMinDate - day1;
                        return (
                            time.getTime() > maxTime || time.getTime() < minTime
                        );
                    }
                },
            },
        };
    },
    methods: {
        initGoods() {
            this.loading = true;
            let a = this.$route.query.gid;
            console.log(a);
            this.commodityId = a;
            let url =
                "http://localhost:8081/gooddetail?gid=" + this.commodityId;
            this.$axios.get(url).then((res) => {
                this.content = res.data.content;
            });
        },
        initAddress() {

            // let url = "http://172.20.10.2:8081/address/";
            let url = "http://localhost:8081/address/";
            this.$axios
                .get(url, { params: { buyerId: this.buyerId } })
                .then((res) => {
                    this.address = res.data.obj;
                    // this.select = res.obj;
                });
        },
        isvip() {
            if (this.vipid == 1) {
                console.log("我是vip");
            } else {
                console.log("我不是vip");
            }
            this.dialogForm1Visible = true;
        },
        // 提交表单
        confirm() {
            // 获取order数值
            let url = "http://localhost:8081/order/";
            console.log(this.order);
            this.$axios.post(url, this.order).then((resp) => {
                console.log(resp);
            });
        },
        // 租借表单
        confirm1() {
            let url = "http://localhost:8081/order/date?datex="+this.date;

            console.log(this.date)
             this.$axios
                .get(url)
                .then((res) => {
                    this.address = res.data.obj;
                    // this.select = res.obj;
                });
            console.log(this.date);
            console.log("租借页面");
        },
    },
    components: {
        myhead,
        foot,
    },
    //根据用户id找其对应的地址
    mounted() {
        // 根据商品id返回该商品所有信息
        this.initGoods();
        // 根据用户id返回该用户地址信息
        this.initAddress();
    },
};
</script>
<style lang="scss" scoped>
.all {
    width: 100%;
    height: 500px;
    .img {
        width: 300px;
        height: 400px;
        padding-left: 200px;
        padding-top: 80px;
        position: absolute;
    }
    .right {
        width: 300px;
        position: absolute;
        padding-left: 700px;
        padding-top: 80px;
        font-family: "微软雅黑";
        text-align: center;
        .hd {
            font-size: 32px;
        }
        .ds {
            margin-top: 10px;
            height: 100px;
        }
        .pr {
            height: 20px;
            margin-top: 10px;
            font-size: 17px;
            color: grey;
            text-decoration: line-through;
        }
        .pr1 {
            font-size: 20px;
            color: red;
        }
        div {
            height: 50px;
        }
        .buy {
            height: 60px;
        }
        .dialog {
            margin: 100px auto;
            width: 30%;
            height: 600px;
            background-color: blue;
        }
    }
}
.select {
    display: inline-block;
    width: 140px;
}
</style>
